<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>socket测试</title>
    <link href="layui/css/layui.css" rel="stylesheet">
    <script src="layui/layui.js"></script>
    <style>
        pre {
            outline: 1px solid #ccc;
            padding: 5px;
            margin: 5px;
        }

        .string {
            color: green;
        }

        .number {
            color: darkorange;
        }

        .boolean {
            color: blue;
        }

        .null {
            color: magenta;
        }

        .key {
            color: red;
        }
    </style>
</head>
<body>
<blockquote class="layui-elem-quote">迈佳迈油车项目在线测试工具</blockquote>
<div class="layui-container">
    <div class="layui-row layui-col-space20" style="margin-top: 16px">
        <div class="layui-col-md8">
            <form class="layui-form layui-form-pane">
                <div class="layui-form-item">
                    <label class="layui-form-label">连接地址</label>
                    <div class="layui-input-block">
                        <input type="text" id="connURL" lay-verify="title" autocomplete="off" placeholder="请输入连接URL"
                               class="layui-input">
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-col-md4">
            <button id="connBtn" class="layui-btn layui-btn-radius layui-btn-primary">连接</button>
            <button id="sendBtn" class="layui-btn layui-btn-radius">发送</button>
            <button id="disConnBtn" class="layui-btn layui-btn-radius layui-btn-danger">断开</button>
            <button id="formatBtn" class="layui-btn layui-btn-radius layui-btn-normal">JSON格式化</button>
        </div>
    </div>
    <form class="layui-form layui-form-pane">
        <div class="layui-row layui-col-space20" style="margin-top: 16px">
            <div class="layui-col-md6">
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">请求JSON</label>
                    <div class="layui-input-block">
                        <textarea id="sendJson" placeholder="请输入内容" class="layui-textarea"
                                  style="height: 300px"></textarea>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">响应JSON</label>
                    <div class="layui-input-block">
                        <textarea id="respJson" placeholder="请输入内容" readonly class="layui-textarea"
                                  style="height: 300px"></textarea>
                    </div>
                </div>
            </div>

        </div>
    </form>
    <div class="layui-row layui-col-space20">
        <div class="layui-col-md6">
            <pre id="sendJsonFormat">
             </pre>
        </div>
        <div class="layui-col-md6">
            <pre id="respJsonFormat">
             </pre>
        </div>
    </div>
</div>
</body>
<script>
    //var url = 'ws://' + location.hostname + ':' + location.port + '/websocket';
    var url = 'ws://localhost:8080/socket/api';
    var sock;
    layui.use(['layer', 'jquery'], function () {
        var layer = layui.layer;
        var $ = layui.$;
        $('#connURL').val(url);
        $('#connBtn').click(function () {
            if (!$('#connURL').val()) {
                layer.msg('请填写URL', {icon: 2});
                return false;
            } else {
                sock = new WebSocket($('#connURL').val());
                sock.onclose  = function (e) {
                    console.log("close");
                    layer.msg("close",{icon:2})
                };
                sock.onerror = function (e) {
                    console.log("error");
                    layer.msg("error",{icon:2})
                };
                sock.onopen = function (e) {
                    console.log(e + "连接已经建立");
                    layer.msg("连接已经建立，请尽情使用吧！", {icon: 1});
                };
                sock.onmessage = function (e) {
                    $('#respJson').val(e.data);
                    $('#respJsonFormat').html(syntaxHighlight(e.data));
//                        setTimeout(function () {
//                            sayHello()
//                        }, 2000);
                };
            }
        });


        $('#sendBtn').click(function () {
            if (sock) {
//                alert(1 + '\t' + sock.readyState);
                if (sock.readyState == 1) {
                    sock.send($('#sendJson').val());
                } else {
                    layer.msg("未连接，请先连接", {icon: 2})
                }
            } else {
//                alert(2);
                layer.msg("未连接，请先连接", {icon: 2});
            }
        });

        $('#disConnBtn').click(function () {
            if (sock && sock.readyState == 1) {
                if (sock.readyState == 1) {
                    sock.close();
                }
            }
        });

        $('#formatBtn').click(function () {
            $('#sendJsonFormat').html(syntaxHighlight($('#sendJson').val()));
        });
    });

    function syntaxHighlight(json) {
        if (typeof json != 'string') {
            json = JSON.stringify(json, undefined, 2);
        }
        json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
            var cls = 'number';
            if (/^"/.test(match)) {
                if (/:$/.test(match)) {
                    cls = 'key';
                } else {
                    cls = 'string';
                }
            } else if (/true|false/.test(match)) {
                cls = 'boolean';
            } else if (/null/.test(match)) {
                cls = 'null';
            }
            return '<span class="' + cls + '">' + match + '</span>';
        });
    }
</script>
</html>